<template>
  <div style="width: 100%">
    <el-table
      v-loading="loading"
      :data="data"
      :height="tableHeight"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <template v-for="(item, index) in columns">
        <el-table-column
          v-if="item.type === 'selection'"
          type="selection"
          width="55"
          :fixed="item.fixed || false"
          :align="item.align || 'left'"
          :selectable="item.selectable"
        />
        <el-table-column
          v-if="item.type === 'index'"
          type="index"
          width="55"
          label="序号"
          class-name="allowDrag"
        />
        <el-table-column
          v-if="item.type === 'normal'"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed || false"
          :align="item.align || 'left'"
          :prop="item.prop"
        />

        <el-table-column
          v-if="item.type === 'ellipsis'"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed || false"
          :align="item.align || 'left'"
          :prop="item.prop"
        >
          <template #default="scope">
            <span class="ellipsis" :title="scope.row[item.prop]">
              {{ scope.row[item.prop] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.type === 'date'"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed || false"
          :align="item.align || 'left'"
          :prop="item.prop"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row[item.prop], item.dateStr) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.type === 'dict'"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed || false"
          :align="item.align || 'left'"
          :prop="item.prop"
        >
          <template #default="scope">
            <dict-tag :options="item.dict" :value="scope.row[item.prop]" />
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.type === 'stateOperate'"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed || false"
          :align="item.align || 'left'"
          :prop="item.prop"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row[item.prop]"
              @change="item.switchStateChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.type === 'operate'"
          class-name="small-padding"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed || false"
          :align="item.align || 'left'"
        >
          <template #default="scope">
            <template v-for="(operation, index) in item.operations">
              <el-button
                v-if="operation.type === 'button'"
                size="mini"
                type="text"
                :icon="operation.icon"
                @click="operation.handleClick(scope.row)"
                v-hasPermi="operation.hasPermi"
                :class="operation.class"
                >{{ operation.label }}
              </el-button>
            </template>
          </template>
        </el-table-column>
        <!--展开-->
        <el-table-column
          v-if="item.type === 'expand'"
          type="expand"
          width="20"
          :fixed="item.fixed || false"
          :align="item.align || 'left'"
        >
          <template #default="{ row, column, $index }">
            <slot
              :name="item.prop"
              :row="row"
              :column="column"
              :index="$index"
            />
          </template>
        </el-table-column>
        <!--自定义-->
        <el-table-column
          v-if="item.type === 'slot'"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed || false"
          :align="item.align || 'left'"
        >
          <template #default="{ row, column, $index }">
            <slot
              :name="item.prop"
              :row="row"
              :column="column"
              :index="$index"
            />
          </template>
        </el-table-column>
      </template>
    </el-table>
    <pagination
      v-if="isShowPage"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
export default {
  name: "CTable",
  dicts: [],
  props: {
    // 表格loading加载状态
    loading: {
      type: Boolean,
      default: false,
    },
    // 表格数据
    data: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    // 是否显示分页
    isShowPage: {
      type: Boolean,
      default: false,
    },
    // 表格列参数
    columns: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    // 表格数据总数
    total: {
      type: Number,
      default: 0,
    },
    tableHeight: {
      type: String,
      default: "calc(100vh - 220px)",
    },
  },
  emits: ["getList", "selectionChange"],
  setup(props, ctx) {
    const queryParams = reactive({
      pageNum: 1,
      pageSize: 10,
    });

    const getList = () => {
      ctx.emit("getList", queryParams);
    };
    const handleSelectionChange = (selection) => {
      ctx.selectionChange("getList", selection);
    };
    return {
      ...toRefs(queryParams),
      getList,
      handleSelectionChange,
    };
  },
};
</script>
